<template>
  <div id="Application">
    <!-- 游戏区域 -->
    <div class="container">
      <!-- 底部挡板 -->
      <div class="board" :style="{ left: boardX + 'px' }"></div>
      <!-- 弹球 -->
      <div class="ball" :style="{ left: ballX + 'px', top: ballY + 'px' }"></div>
      <!-- 游戏结束提示 -->
      <h1 v-if="fail" style="text-align: center;">游戏失败</h1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制挡板位置
      boardX: 0,
      // 控制弹球位置
      ballX: 0,
      ballY: 0,
      // 控制弹球移动速度
      rateX: 0.1,
      rateY: 0.1,
      // 控制结束游戏提示的展示
      fail: false,
    };
  },
  mounted() {
    // 添加键盘事件
    this.enterKeyup();
    // 随机弹球的运动速度和方向
    this.rateX = Math.random() * 0.5 + 0.1;
    this.rateY = Math.random() * 0.5 + 0.1;
    // 开启计数器，控制弹球移动
    this.timer = setInterval(() => {
      // 到达右侧边缘进行反弹
      if (this.ballX + this.rateX >= 440 - 30) {
        this.rateX *= -1;
      }
      // 到达左侧边缘进行反弹
      if (this.ballX + this.rateX <= 0) {
        this.rateX *= -1;
      }
      // 到达上侧边缘进行反弹
      if (this.ballY + this.rateY <= 0) {
        this.rateY *= -1;
      }
      this.ballX += this.rateX;
      this.ballY += this.rateY;
      // 失败判定
      if (this.ballY >= 440 - 30 - 10) {
        // 挡板接住了弹球，进行反弹
        if (
          this.boardX <= this.ballX + 30 &&
          this.boardX + 80 >= this.ballX
        ) {
          this.rateY *= -1;
        } else {
          // 没有接住弹球，游戏结束
          clearInterval(this.timer);
          this.fail = true;
        }
      }
    }, 2);
  },
  methods: {
    // 控制挡板移动
    keydown(event) {
      if (event.key == "ArrowLeft") {
        if (this.boardX > 10) {
          this.boardX -= 20;
        }
      } else if (event.key == "ArrowRight") {
        if (this.boardX < 440 - 80) {
          this.boardX += 20;
        }
      }
    },
    enterKeyup() {
      document.addEventListener("keydown", this.keydown);
    },
  },
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  margin: 0 auto;
  width: 440px;
  height: 440px;
  background-color: blanchedalmond;
}
.ball {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0px;
  top: 0px;
  background-color: orange;
  border-radius: 30px;
}
.board {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 10px;
  width: 80px;
  border-radius: 5px;
  background-color: red;
}
</style>
